import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import store from '../store/index.js'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index,
    meta: {
      title: '首页'
    },
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: {
      title: '登录页'
    },
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue'),
    meta: {
      title: '注册页'
    },
    children: [
      {
        path: '/register/phone',
        name: 'Phone',
        component: () => import('../components/account/Phone.vue'),
      },
      {
        path: '/register/email',
        name: 'Email',
        component: () => import('../components/account/Email.vue'),
      },
    ]
  },
  {
    path: '/my',
    name: 'My',
    redirect: '/my/orderList/allOrder',
    component: () => import('../views/My.vue'),
    // 添加路由元信息
    children: [
      {
        path: 'orderList',
        name: 'OrderList',
        redirect: '/my/orderList/allOrder',
        component: () => import('../components/my/OrderList.vue'),
        children: [
          {
            path: 'allOrder',
            name: 'AllOrder',
            component: () => import('../components/my/OrderList/AllOrder.vue'),
          },
          {
            path: 'successOrder',
            name: 'SuccessOrder',
            component: () => import('../components/my/OrderList/SuccessOrder.vue'),
          },
          {
            path: 'cancelledOrder',
            name: 'CancelledOrder',
            component: () => import('../components/my/OrderList/CancelledOrder.vue'),
          },
        ]
      },
      {
        path: 'return',
        name: 'Return',
        redirect: '/my/return/apply',
        component: () => import('../components/my/Return.vue'),
        children: [
          {
            path: 'apply',
            name: 'Apply',
            component: () => import('../components/my/Return/Apply.vue'),
          },
          {
            path: 'checkOrder',
            name: 'CheckOrder',
            component: () => import('../components/my/Return/CheckOrder.vue'),
          },
        ]
      },
      {
        path: 'follow',
        name: 'Follow',
        component: () => import('../components/my/Follow.vue'),
      },
      {
        path: 'customerconsult',
        name: 'Customerconsult',
        component: () => import('../components/my/Customerconsult.vue'),
      },
      {
        path: 'comments',
        name: 'Comments',
        component: () => import('../components/my/Comments.vue'),
      },
    ],
    meta: {
      // 是否授权
      isAuth: true
    },
  },
  {
    path: '/detail',
    name: 'Detail',
    component: () => import('../views/Detail.vue'),
    beforeEnter: (to, from, next) => {
      window.scroll(0, 0);
      next();
    }
  },
  {
    path: '/shopping',
    name: 'Shopping',
    redirect: '/shopping/cart',
    component: () => import('../views/Shopping.vue'),
    children: [
      {
        path: '/shopping/cart',
        name: 'Cart',
        component: () => import('../components/shopping/Cart.vue'),
      },
      {
        path: '/shopping/check',
        name: 'Check',
        component: () => import('../components/shopping/Check.vue'),
        beforeEnter: (to, from, next) => {
          window.scroll(0, 0);
          next();
        }
      },
      {
        path: '/shopping/pay',
        name: 'Pay',
        component: () => import('../components/shopping/Pay.vue'),
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 通过前置导航守卫判断路由是否需要授权
router.beforeEach(async (to, from, next) => {
  // 判断路由信息是否需要身份验证
  if (to.matched.some(item => item.meta.isAuth)) {
    // 检测vuex登录状态
    if (store.state.isAuth) {
      // 浏览器是否存在token并且isAuth为登录状态
      if (store.state.isAuth && window.sessionStorage.getItem("token")) {
        next();
      } else {
        alert("请登录，无token")
        next('/login');
      }
    } else {
      // 1.刷新会导致vuex数据丢失
      // 2.token仍然保存在浏览器本地(有可能是未过期)

      // 存在token，页面可能刷新了isAuth为false
      if (store.state.token) {
        next();
      } else {
        // 无token,isAuth为false，直接跳转登录页
        alert("请重新登录");
        // to.fullPath 目的：为了获取未授权之前访问路由的完整路径
        next({
          path: "/login",
          query: {
            redirect: to.fullPath
          }

        });
      }
    }
  } else {
    // 普通页面不需要授权
    next();
  }
})

export default router
